<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>51微贷</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../css/common.css">
		<link rel="stylesheet" type="text/css" href="../css/icomoon/style.css">
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css">
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css">
		<script type="text/javascript" src="../js/rem.js"></script>
	</head>

	<body>
		<div class="m-common m-securitypwd m-bindbank">
			<h3 class="header f-pr">
				<span>银行卡</span>
				<i class="icon-angle-left f-pa"></i>
				<small class="f-pa" id="banksupport">支持的银行卡</small>
			</h3>
			<div class="process-box">
				<p class="process"><img src="../images/process-1.png"></p>
				<p class="step clearfix">
					<span>实名</span>
					<span>绑卡</span>
					<span>完成</span>
				</p>
			</div>
			<div class="bindbank-tips">
				<p>请绑定银行卡号，提升个人账户安全系数</p>
				<!--<p>. 登录密码。</p>-->
			</div>
			<ul>
				<li>
					<i class="icon icon-2"></i>
					<input type="text" class="bank" id="bank" placeholder="发卡银行" readonly="true">
				</li>
				<li>
					<i class="icon icon-6"></i>
					<input type="text" id="branch" placeholder="请输入您的开户支行">
					<i class="close-icon f-pa"></i>
				</li>
				<li>
					<i class="icon icon-5"></i>
					<input type="text" id="province" readonly="true" placeholder="请选择开户城市" value="">
				</li>
				<li>
					<i class="icon icon-1"></i>
					<input type="text" class="cardno" placeholder="请输入您的储蓄卡卡号">
					<i class="close-icon f-pa"></i>
				</li>
				
			</ul>
			<ul class="mt">
				<!--<li>
					<i class="icon icon-3"></i>
					<input type="text" class="mobile" placeholder="请输入银行卡预留手机号">
					<i class="close-icon f-pa"></i>
				</li>-->
				<li>
					<i class="icon icon-4"></i>
					<input type="text" class="code" placeholder="请输入手机验证码">
					<button class="code-text f-pa">获取验证码</button>
				</li>
			</ul>
			<div class="btn-box">
				<a class="btn">提交</a>
			</div>
			<input type="hidden" id="bank-code" value="">
			<input type="hidden" id="province-code" value="">
			<input type="hidden" id="city-code" value="">
		</div>
		<script type="text/javascript" src="../js/md5.min.js"></script>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/mui.picker.min.js"></script>
		<script type="text/javascript" src="../js/mui.poppicker.js"></script>
		<script type="text/javascript" src="../js/zepto.min.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript">

			var doc = document;
			var array = [];
			$.ajax({
				url: base + 'account/banklist',
				type: 'get',
				dataType: 'json',
				async: false,
				headers: sign(md5),
				success: function(data) {
					for(var i = 0, len = data.list.length; i < len; i++) {
						array[i] = {
							'value': data.list[i].code,
							'text': data.list[i].name
						};
					}
				},
				error: function() {
					console.error('error');
				}
			});

			var picker = new mui.PopPicker();
			picker.setData(array);
			var showPicker = doc.getElementById('bank');
			var bankCode = doc.getElementById('bank-code');
			showPicker.value = array[0].text;
			bankCode.value = array[0].value;
			showPicker.addEventListener('tap', function() {
				picker.show(function(items) {
					showPicker.value = items[0].text;
					bankCode.value = items[0].value;
				});
			}, false);
						
			getProvince();
			
			function getProvince(){
				var province = [{
					value: 1,
					text: '上海市',
					children: [{
						value: 2,
						text: '上海市'
					}]
				}];
				var propicker = new mui.PopPicker({layer: 2});
				propicker.setData(province);
				var proshowPicker = doc.getElementById('province');
				proshowPicker.addEventListener('tap', function() {
					propicker.show(function(items) {
						proshowPicker.value = items[0].text + items[1].text;
						$('#province-code').val(items[0].value);
						$('#city-code').val(items[1].value);
					});
				}, false);
				
				var list = [];
				$.ajax({
					url: base + 'infranstructure/province',
					type: 'get',
					dataType: 'json',
					async: false,
					headers: sign(md5),
					success: function(data){
						for(var i = 0; i < data.length; i++){
							var children = [];
							$.ajax({
								url: base + 'infranstructure/city',
								type: 'get',
								data: {province: data[i].id},
								dataType: 'json',
								async: false,
								success: function(res){
									for(var z = 0; z < res.length; z++){
										children.push({
											value: res[z].id,
											text: res[z].name
										});
									}
								},
								error: function(){
									console.error('error');
								}
							});
							list[i] = {
								value: data[i].id,
								text: data[i].name,
								children: children
							};
							propicker.setData(list);
						}
					},
					error: function(){
						console.error('error');
					}
				});
			}
			
			mui.plusReady(function() {
				function countdowncode(wait) {
					var $obj = $('.code-text');
					if(wait === 0) {
						$obj.text('获取验证码').removeClass('disable').attr('disable', false).bind('tap',function(){
							return getbankcardmobilecode();
						});
					} else {
						$obj.unbind('tap').text(wait + '秒后重发').addClass('disable').attr('disable', true);
						wait--;
						setTimeout(function() {
							countdowncode(wait);
						}, 1000);
					}
				};
				$('.code-text').on('tap', function() {
					return getbankcardmobilecode();
				});
				//请求验证码方法
				function getbankcardmobilecode(){
					$.ajax({
						url: base + 'account/bankcardmobilecode',
						type: 'post',
						data: {
							'id': plus.storage.getItem('user_id'),
							'mobile': $.trim($('.mobile').val())
						},
						dataType: 'json',
						headers: sign(md5),
						success: function(data) {
							console.log('发送短信验证码：'+JSON.stringify(data));
							if(data.result) {
								countdowncode(data.wait_second);
							} else {
								mui.toast(data.message);
							}
						},
						error: function(data) {
							console.error(data);
						}
					});
				}

				

				$('.btn').on('tap', function() {
					if(!validate()) {
						return false;
					} else {
						var data = {
							'user': plus.storage.getItem('user_id'),
							'bank_no': $.trim($('.cardno').val()),
							'bank_code': $('#bank-code').val(),
							'mobile_code': $.trim($('.code').val()),
							'branch': $('#branch').val(),
							'province': parseInt($('#province-code').val()),
							'city': parseInt($('#city-code').val())
						};
						console.log('请求参数：' + JSON.stringify(data));
						$.ajax({
							url: base + 'account/bindbankcard',
							type: 'post',
							data: data,
							dataType: 'json',
							headers: sign(md5),
							success: function(data) {
								if(data.result){
									setTimeout(function(){
										plus.webview.currentWebview().close();
									},1000);
								}
								mui.toast(data.message);
							},
							error: function(data) {
								console.error(data.message);
							}
						});
					}
				});

				function validate() {
					var bank_no = $.trim($('.cardno').val()),
						mobile_code = $.trim($('.code').val()),
						branch = $('#branch').val(),
						province = parseInt($('#province-code').val()),
						city = parseInt($('#city-code').val());
					if(bank_no == '') {
						mui.toast('请输入您的储蓄卡卡号');
						return false;
					}
					var regex = /^(\d{16}|\d{19})$/;
	                if (!regex.test(bank_no)) {
	                    mui.toast('银行卡号不正确');
	                    return false;
	                }
					if(mobile_code == '') {
						mui.toast('请输入手机验证码');
						return false;
					}
					if(branch == ''){
						mui.toast('请输入开户支行');
						return false;
					}
					if(province == ''){
						mui.toast('请选择开户支行所在省份');
						return false;
					}
					if(city == ''){
						mui.toast('请选择开户支行所在城市');
						return false;
					}
					return true;
				}

				$('.icon-angle-left').on('tap', function() {
					mui.back();
				});

				$('#banksupport').on('tap', function() {
					mui.openWindow({
						url: 'banksupport.html'
					});
				});
			});
		</script>
	</body>

</html>